<template>
  <div>
    <h2 style="font-size: 20px" strong>营养金字塔</h2>
    <div class="container">
      <div class="index"></div>
      <div id="main"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { TitleComponent, GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([TitleComponent, GridComponent, BarChart, CanvasRenderer]);
import deImg from "@/image/health.jpg";
export default {
  name: "Index",
  data() {
    return {};
  },
  mounted() {
    this.statistics();
  },
  methods: {
    statistics() {
      this.$axios.get("/goods/info/statistics").then((res) => {
        console.log(res.data.data);
        let data1 = res.data.data;
        console.log(data1.length);
        let datax = [];
        let datay = [];
        for (let i = 0; i < data1.length; i++) {
          datax[i] = data1[i].goodsName;
          datay[i] = data1[i].num;
          console.log(data1[i].num);
        }
        console.log("datax=" + datax);

        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
          title: {
            text: "营养套餐销量排行版",
          },
          tooltip: {},
          xAxis: {
            type: "category",
            axisLabel: {
              //x轴文字的配置
              show: true,
              interval: 0, //使x轴文字显示全
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 10; //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
            data: datax,
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              itemStyle: {
                normal: {
                  //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                  color: function (params) {
                    // build a color map as your need.
                    // 在这里面写好函数 根据条件返回对应的颜色就可以
                    var colorList = [
                      "#C1232B",
                      "#B5C334",
                      "#FCCE10",
                      "#E87C25",
                      "#27727B",
                      "#FE8463",
                      "#9BCA63",
                      "#FAD860",
                      "#F3A43B",
                      "#60C0DD",
                      "#D7504B",
                      "#C6E579",
                      "#F4E001",
                      "#F0805A",
                      "#26C0C0",
                    ];
                    return colorList[params.dataIndex];
                  }, //以下为是否显示，显示位置和显示格式的设置了

                },
              },
              data: datay,
            },
          ],
        });
      });
    },
  },
};
</script>

<style scoped>
.container{
  display: flex;
}
.index {
  width: 300px;
  background: url("../image/health.jpg");
  background-size: 100%;
  font-size: 18px;
  margin: 0 auto;
}
#main {
  width: 75%;
  height: 400px;
  background-color: #fff;

}
</style>
